<template>
  <el-dialog
    class="delete-dialog"
    :visible.sync="IsShow"
    :mask-closable="false"
    :width="width"
    :show-close="false"
    :close-on-click-modal="false"
    :append-to-body="appendToBody"
  >
    <div slot="title" :class="['dialog-header', isDelete ? 'dialog-header--delete' : 'dialog-header--primary']">
      <div>{{ title }}</div>
      <div @click="OnHandleCancel">
        <img src="~@/assets/image/Popup_CloseButton.png" alt="closed" />
      </div>
    </div>
    <div style="padding-left: 20px" v-if="info">{{ info }}</div>
    <slot></slot>
    <div slot="footer" class="delete-footer" v-show="showFooter">
      <span class="close-button--plain primary-btn btn-left" @click="OnHandleCancel">取消</span>
      <span :class="['primary-btn', isDelete ? 'comfirm-btn-delete' : 'comfirm-btn-primary']" @click="OnHandleCommit">{{
        btnText
      }}</span>
    </div>
  </el-dialog>
</template>

<script>
export default {
    props: {
        width: {
            type: String,
            default: '381px'
        },
        title: {
            type: String,
            default: '操作提示'
        },
        appendToBody: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            IsShow: false,
            modalType: '',
            info: '',
            btnText: '',
            CB: null,
            showFooter: true
        }
    },
    computed: {
        isDelete() {
            return this.modalType === 'delete'
        }
    },
    methods: {
        Show(_modalType, _info, _btnText, callback) {
            this.modalType = _modalType
            this.info = _info
            this.IsShow = true
            this.CB = callback
            if (_btnText) {
                this.btnText = _btnText
            }
            this.$emit('resetForm')
        },
        hidenFooter() {
            this.showFooter = false
        },
        OnHandleCancel() {
            this.IsShow = false
        },
        OnHandleCommit() {
            // this.IsShow = false;
            this.CB()
        }
    }
}
</script>
<style lang="less" scoped>
.delete-dialog {
  .dialog-header {
    color: #333333;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    img {
      cursor: pointer;
    }
  }
  .dialog-header--delete {
    border-bottom: 1px solid #ed4747;
  }
  .dialog-header--primary {
    border-bottom: 1px solid #3579e0;
  }
  .delete-footer {
    text-align: center;
    padding: 15px 0;
    .close-button--plain {
      color: #999999;
      border: 1px solid #bfbfbf;
    }
    .primary-btn {
      width: 138px;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      border-radius: 15px;
      cursor: pointer;
      text-align: center;
      display: inline-block;
    }
    .btn-left {
      margin-right: 15px;
    }
    .comfirm-btn-delete {
      background: #ed4747;
      color: #ffffff;
    }
    .comfirm-btn-primary {
      background: #3579e0;
      color: #ffffff;
    }
  }
}
</style>
